import React, { useEffect } from 'react'
import { Pagination, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/react';
import './index.scss';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/autoplay';
import 'swiper/css/effect-fade';
import abc1 from './img/two-member.png'
import abc2 from './img/collection.png'
import abc3 from './img/more.png'
import abc4 from './img/gift.png'
import NavBox_t from '../../navcon/nav'
import ItemFooter from './itemfoot/itemfooter'
import SwiperCore, { EffectFade } from 'swiper';
//引入 connect
import { connect } from 'react-redux';
//引入动作
import { fetchItemData } from '../../store/action/item';
//发布订阅
import PubSub from 'pubsub-js'
SwiperCore.use([EffectFade]);

const Con_item = (props) => {
    // const [num, setNum] = useState(0)
    useEffect(() => {
        let ptKey = props.match.params.id;
        props.fetchItemData(ptKey)
        // PubSub.subscribe('numAll', (_, data) => {
        //     this.setState({
        //         num: data
        //     })
        // })
    }, [])


    //因为 render 的渲染在 componentDidMount 执行之前会调用一次，所以   {itemObj.templateInfo.name} 渲染会报错，在定义变量时，将变量的属性的初始值写上就不会报错了
    // render() {
    let { itemObj, swiperArr, jieshaolist } = props;
    return (

        <div className='item_con'>
            <div className='item_swiper'>
                <Swiper
                    modules={[Pagination, Autoplay, EffectFade]}
                    effect="fade"

                    pagination={{ clickable: true }}
                    autoplay={{ delay: 2500 }}
                    loop={true}
                >
                    {
                        swiperArr.map((item, index) => <SwiperSlide key={index}>
                            < img src={item} alt={item}></img>
                        </SwiperSlide>)
                    }
                </Swiper>
            </div>
            <div className='item_kaitong'>
                <span className='kaitong_span'>开通旺旺会员，购买立省21元</span>
                <span className='kaitong_span'>立即开通</span>
            </div>
            <div className='jiage'>
                <span>￥</span>
                <span>{itemObj.templateInfo.origPrice}</span>
                <span>/{itemObj.templateInfo.unit}</span>
                <span>￥{itemObj.templateInfo.supplyPrice}</span>
                <span><img src={abc1} alt={2} /></span>
            </div>
            <div className='shangping'>
                <span>
                    {itemObj.templateInfo.name}
                    {itemObj.templateInfo.commodityBatchList[0].flavour}
                    {itemObj.templateInfo.commodityBatchList[0].spec}
                </span>
                <span><div><img src={abc2} alt={2} /></div><span>收藏</span></span>
            </div>
            <span className='jieshao'>{itemObj.templateInfo.description}</span>
            <div className='kongbai'></div>
            <div className='yixuan'>
                <span>已选</span>
                <div className='yixuan_right'>
                    <span>{itemObj.templateInfo.displayName}</span>
                    <span><img src={abc3} alt={2} /></span>
                </div>
            </div>
            <div className='cuxiao'>
                <span>促销</span>
                <div className='cuxiao_right'>
                    <span className='cuxiao_right1'>
                        <span><img src={abc4} alt={2} /></span>
                        <span>本商品当前正在参与1项满赠活动</span>
                    </span>
                    <span className='cuxiao_right2'><img src={abc3} alt={2} /></span>
                </div>
            </div>
            <div className='kongbai1'></div>
            <div className='xiangqing'>
                <span></span>
                <span>商品详情</span>
            </div>
            <div className='jieshaotu'>
                {
                    jieshaolist.map((item, index) => <div key={index}>
                        <img src={item} alt={item} />
                    </div>)
                }
            </div>
            <div className='kongbai'></div>
            <div className='xiangqing'>
                <span></span>
                <span>规格参数</span>
            </div>
            <div className='heixian'></div>
            <div className='kongbai'></div>
            <div className='xiangqing'>
                <span></span>
                <span>价格说明</span>
            </div>
            <div className='heixian'></div>
            <div className='shuoming'>
                <span>划线价</span>
                <span>指商品的专柜价、吊牌价、正品零售价、厂商指导价或 该商品的曾经展示过销售价等，并非原价，仅供参考。</span>
            </div>
            <div className='shuoming'>
                <span>非划线价</span>
                <span>指商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员优惠券、积分等发生变化，最终以订单为准</span>
            </div>
            <NavBox_t />
            <ItemFooter itemObj={itemObj} />
        </div>


    )
}
export default connect(
    state => ({
        itemObj: state.itemdata.itemObj || {
            templateInfo: {
                commodityBatchList: [0]
            },
        },
        swiperArr: state.itemdata.swiperArr || [],
        jieshaolist: state.itemdata.jieshaolist || [],
    }), { fetchItemData })(React.memo(Con_item))